<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>
        Query client-side 3D extents | Sample | ArcGIS API for JavaScript 4.18
    </title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        #infoDiv {
            background-color: rgba(255, 255, 255, 0.9);
            padding: 10px;
        }

        h3 {
            border-bottom: 1px solid black;
        }

        img {
            max-height: 200px;
            max-width: 200px;
        }
    </style>

    <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css"/>
    <script src="https://js.arcgis.com/4.18/"></script>

    <script>
        require([
            "esri/WebScene",
            "esri/views/SceneView",
            "esri/tasks/support/Query"
        ], function (WebScene, SceneView, Query) {
            let webScene = new WebScene({
                portalItem: {
                    id: "bde8e884a5064f48bcf3440964d748e2"
                }
            });

            let view = new SceneView({
                container: "viewDiv",
                map: webScene,
                environment: {
                    lighting: {
                        ambientOcclusionEnabled: true,//指示是否显示环境光遮挡阴影
                    }
                }
            });

            //类的实例，就可以利用
            webScene.when(()=>{
                var sceneLayer = webScene.layers.getItemAt(0);
                //获取查询的所有属性
                sceneLayer.outFields = ["*"];
                //当点击时
                view.on("click",(event)=>{
                    //获取在给定图层的视图上创建的LayerView
                    view.whenLayerView(sceneLayer).then((sceneLayerView)=>{
                        //返回与指定屏幕坐标相交的图形,有返回值,要.then()来接收,目的就是获取点击的位置,为转场做准备
                        view.hitTest(event).then((response)=>{
                            //获取图形
                            let graphic=response.results[0].graphic;
                            //共有三种类型的查询：属性查询、空间查询和统计查询。您可以查询这些类别之一中的要素，也可以在单个查询中使用每个类别的元素。
                            let query = new Query({
                                objectIds:graphic.OBJECTID,//用于查询图层中要素的 ObjectID 数组
                                outFields:["*"]
                            });

                            //转场
                            sceneLayerView.queryExtent(query).then((result)=>{
                                view.goTo({
                                    target:result.extent.expand(2),//值为 1.5 会将范围扩展为比原始范围大 50%
                                    tilt: 60
                                },{
                                    duration:4000,
                                    easing:"out-expo"
                                });
                            });

                            //对图层视图中的要素执行查询
                            sceneLayerView.queryFeatures(query).then((result)=>{
                                showInfo(result.features[0].attributes);
                            });
                        })
                    });

                });
            });



            function showInfo(attributes) {
                document.getElementById("infoDiv").innerHTML =
                    "<h3>" + attributes.Building_N +
                    "</h3><p> Address: " + attributes.Address +
                    "</p><p> City: " +
                    attributes.City +
                    "</p><p> Construction year: " +
                    attributes.Construction +
                    "</p>" +
                    "<img src='" +
                    attributes.AA2_Photo +
                    "' alt=''>";
            }

            view.ui.add(document.getElementById("infoDiv"), "top-right");
        });
    </script>
</head>

<body>
<div id="infoDiv" class="esri-widget">
    单击建筑物以放大并获取更多信息
</div>
<div id="viewDiv"></div>
</body>
</html>
